<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>找回密码</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
        <script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js" type="text/javascript"></script>
        <script src="__PUBLIC__/midi/js/public.js" type="text/javascript"></script>
         <script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
        <script src="__PUBLIC__/midi/js/check-forget.js"></script>
		<style>
			    	.migister-box{
	    		width: 390px;
	    		margin: 0 auto;
	    		margin-top: 64px;
	    		margin-bottom: 224px;
	    	}
	    	.migister-box .form-text{
	    		text-align: right;
	    		margin-bottom: 64px;
	    	}
	    	.migister-box .form-text i{
	    		cursor: pointer;
	    		color: #29D0C9;
	    	}
	    	form input,button{
	    		border: 0;
	    		outline: none;
	    	}
	    	form .formi{
	    		padding-bottom: 17px;
	    		border-bottom: 1px solid #d1d1d1;
	    	}
	    	form .formi-last{
	    		margin-bottom: 24px;
	    	}
            .formi-phone{
            	height: 24px;
            	position: relative;
            	margin-bottom: 21px;
            }
	    	.formi-phone i{
	    		width: 19px;
	    		height: 25px;
	    		display: inline-block;
	    		background-image: url(__PUBLIC__/midi/img/shoujihao.png);
	    		position: absolute;
	    		left: 5px;
	    		bottom: 17px;
	    	}
	    	.formi-phone input{
	    		position: absolute;
	    		left: 54px;
	    		bottom: 22px;
	    	}
	    	.formi-email{
	    		position: relative;
	    		height:40px;
	    		margin-bottom: 26px;
	    	}
	    	.formi-email i{
	    		width: 19px;
	    		height: 25px;
	    		display: inline-block;
	    		background-image: url(__PUBLIC__/midi/img/iconfont-youxiang.png);
	    		position: absolute;
	    		left: 3px;
	    		bottom: 23px;
	    	}
	    	.formi-email input{
	    		position: absolute;
	    		left: 54px;
	    		bottom: 21px;
	    	}
	    	.formi-email a{
	    		position: absolute;
	    		right: 1px;
	    		bottom: 11px;
	    	}
	    	.formi-mima{
	    		height: 25px;
	    		position: relative;
	    		margin-bottom: 26px;
	    	}
	    	.formi-mima i{
	    		width: 19px;
	    		height: 25px;
	    		display: inline-block;
	    		background-image: url(__PUBLIC__/midi/img/mima-.png);
	    		position: absolute;
	    		left: 4px;
	    		bottom: 21px;
	    	}
	    	.formi-mima input{
	    		position: absolute;
	    		left: 53px;
	    		bottom: 22px;
	    	}
	    	.formi-last i{
	    		background-image: url(__PUBLIC__/midi/img/tupianyanzhengma.png);
	    	}
	    	form .forma a{
	    		display: inline-block;
                width: 100px;
                height: 40px;
                line-height: 40px;
                border-radius: 10px;
                text-align: center;
                cursor: pointer;
	    	}
	    	form .formr input{
	    		margin-right: 10px;
	    	}
	    	form .formr span a{
	    		color: #29D0C9;
	    	}
	    	form .formb button{
	    		width: 390px;
	    		height: 50px;
	    		background-color: #29D0C9;
	    		color: #fff;
	    		font-size: 1.8rem;
	    		font-weight: bold;
	    		border-radius: 10px;
	    	}
	    	.formi .img-box{
	    		position: absolute;
	    		right: 0px;
	    		height: 100%;
	    		top: -11px;
	    	}
	    	.alert_box {
	    		height: 17px;
	    		padding-bottom: 17px;
	    		text-align: center;
	    		color: red;
	    	}

	    	.mask {
	    		display: none;
	    		position: fixed;
	    		top: 0;
	    		right: 0;
	    		bottom: 0;
	    		left: 0;
	    		-webkit-align-items: center;
	    		align-items: center;
	    		-webkit-box-align: center;
	    		-webkit-box-pack: center;
	    		-ms-flex-align: center;
	    		-ms-flex-pack: center;
	    		-webkit-justify-content: center;
	    		justify-content: center;
	    	}

	    	.show {
	    		display: -webkit-box;
	    		display: -webkit-flex;
	    		display: -ms-flexbox;
	    		display: flex;
	    	}

	    	.code-alert {
	    		width: 10rem;
	    		text-align: center;
	    		color: #fff;
	    		border-radius: 3px;
	    		background: rgba(0, 0, 0, 0.5);
	    		padding: 1vw 0;
	    	}

	    	.code-right {
	    		background-color: #777;
	    		color: #fff;
	    	}
              .active{
                background-color: #29d0c9;
                color: #fff;
            }

		 @media only screen and (min-width:1200px ) {
		 	.migister-mb{
		 		display: none;
		 	}
		 }
			@media only screen and (max-width:1200px ) {
				.login .con div{
					width: 146px;
				}
				.main{
					display: block;
				}
				.bu-login{
					padding-top: 3vh;
				}
				.img-box img{
					width: 21.111111vw !important;
					padding-right: 0vw !important;
				}
				.migister-box{
					margin:  0 6vw;
					width: calc(100% - 12vw);
					padding-top: 3vh;
				}
				form .formi{
					border: 1px solid #D1D1D1;
                    border-radius: 4px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    align-items: center;
                    -webkit-align-items: center;
                     padding: 2vh 0;
				}
				.formi i{
					position: initial;
					margin-left: 4vw;
					margin-right: 4vw;
				}
				.formi input{
					position: initial;
					font-size: 4.166667vw;
				}
				.formi .img-box{
					top: 2.7vh;
				}
				.alert_box{
					font-size: 4.166667vw;
				}
				form .formb button{
					width: 100%;
					font-size: 4.166667vw;
				}
			}
		</style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<!--pc端页面的主要内容-->
		<div class="migister-mb">
			<div class="wiezhi">
			   <div class="con">
				  <span>当前位置：登录&gt; 找回密码</span>
			   </div>
		    </div>
		    <!-- <div class="login">
			   <div class="con">
				  <p>重置密码</p>
			   <div></div>
			   </div> -->
		    </div>

		</div>
		<div class="main">
			<div class="migister-box">
				<div class="inner">
					<form autocomplete="off" action="__CONTROLLER__/resetPassword" method="POST">

						<div class="formi formi-phone">
							<i></i>
							<input type="text" name="user_phone" placeholder="请输入手机号" class="tel-box" />
						</div>
						   <div class=" formi formi-last formi-mima">
							<i></i>
							<input type="text" minlength="4" maxlength="4" class="c" placeholder="图片验证码" name="verify" id="verify"/>
					        <span class="img-box">
						        <img src="__CONTROLLER__/showVerify" onclick="this.src+='/'+Math.random();" title="点击变换" id="vimg">
					        </span>
						</div>
						<div class="formi formi-mima">
							<i></i>
							<input type="password" name="user_password" placeholder="设置密码" class="pwd-f" />
						</div>
						<div class=" formi  formi-mima">
							<i></i>
							<input type="password" placeholder="确认密码" class="pwd-s"/>
						</div>
						<div class="formi forma formi-email">
							<i></i>
							<input type="text" placeholder="请输入验证码" class="test-code" />
							<a class="code-right get_code active">获取验证码</a>
						</div>
                        <div class="alert_box"></div>
                        <div class="mask">
                        	<div class="code-alert">
                        		获取验证码成功
                        	</div>
                        </div>

						<div class="formb">
							<button class="btn">完 成</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!--pc端页面的主要内容结束-->
		<!--移动端注册页的主要内容-->
		
		<!--移动端注册页的主要内容结束-->
	</body>
</html>
